<template>
  <div>
    <Top />
    <div class="bigbox">
      <!-- 顶部导航 -->
      <div class="lan">
        <div class="tou">
          <router-link to="Denglu">
            <img src="/img/wangimg/imgs/tou.gif" alt="" /><b>182****6308</b>
          </router-link>
        </div>

        <div class="di">
          <span>我的套餐 &gt;</span>
          <span>信用分:573分 &gt;</span>
        </div>

        <div class="si">
          <span
            ><p>0</p>
            卡卷</span
          >
          <span
            ><p>--</p>
            流量钱包</span
          >
          <span
            ><p>--</p>
            5G金币</span
          >
          <span
            ><p>973</p>
            积分</span
          >
        </div>
      </div>

      <!-- 全球通品牌 -->
      <div class="quan">
        <div class="zuo">
          <img src="img/wangimg/imgs/quan-01.gif" alt="" />
          <span
            >全球通品牌
            <p>去了解 ></p></span
          >
        </div>
        <div class="zuo">
          <img src="img/wangimg/imgs/quan-02.gif" alt="" />
          <span
            >我的权益
            <p>领取专属权益 ></p></span
          >
        </div>
      </div>

      <ul class="tao">
        <li>
          <img src="img/wangimg/imgs/fu-1.gif" alt="" />
          <span>5G套餐</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fu-2.gif" alt="" />
          <span>宽带服务</span>
        </li>
        <li>
          <router-link to="Yiyuan">
            <img src="img/wangimg/imgs/fu-3.gif" alt="" />
            <span>1元抢会员</span>
          </router-link>
        </li>
        <li>
          <img src="img/wangimg/imgs/fu-4.gif" alt="" />
          <span>限时领好卷</span>
        </li>
      </ul>

      <!-- 我的服务aaaa -->
      <div class="yewu">
        <b>我的服务</b>
        <span>更多服务 ></span>
      </div>
      <ul class="fuwu">
        <li>
          <img src="img/wangimg/imgs/fuwu-1.gif" alt="" />
          <span>我的套餐</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-2.gif" alt="" />
          <span>套餐余量</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-3.gif" alt="" />
          <span>账单查询</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-4.gif" alt="" />
          <span>已定业务</span>
        </li>
        <router-link to="Huafeiyue">
          <li>
          <img src="img/wangimg/imgs/fuwu-5.gif" alt="" />
          <span>话费余额</span>
          </li>
        </router-link>
        <li>
          <img src="img/wangimg/imgs/fuwu-6.gif" alt="" />
          <span>订单查询</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-7.gif" alt="" />
          <span>充值缴费</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-8.gif" alt="" />
          <span>宽带报表</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-9.gif" alt="" />
          <span>我的投诉</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-10.gif" alt="" />
          <span>交费历史</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-11.gif" alt="" />
          <span>我的卡卷</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-12.gif" alt="" />
          <span>我的订单</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-13.gif" alt="" />
          <span>在线取号</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-14.gif" alt="" />
          <span>一证通查</span>
        </li>
        <router-link to="Yiyuanb">
          <li>
          <img src="img/wangimg/imgs/fuwu-15.gif" alt="" />
          <span>我的会员</span>
        </li>
        </router-link>
        <li>
          <img src="img/wangimg/imgs/fuwu-15.gif" alt="" />
          <span>我的权益</span>
        </li>
      </ul>

      <!-- 特色业务 -->
      <div class="yewu">
        <b>特色业务</b>
        <span>更多 ></span>
      </div>
      <ul class="tese">
        <li>
          <img src="img/wangimg/imgs/tese-1.gif" alt="" />
          <span>家庭专区</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/tese-2.gif" alt="" />
          <span>在售资费公示</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/tese-3.gif" alt="" />
          <span>139邮箱</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-6.gif" alt="" />
          <span>电子发票</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-13.gif" alt="" />
          <span>中国移动公益</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/tese-4.gif" alt="" />
          <span>和包钱包</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/tese-5.gif" alt="" />
          <span>咪咕精选</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/yunpan-3.gif" alt="" />
          <span>积分倍享</span>
        </li>
      </ul>

      <!-- 我的云盘 -->
      <div class="yewu">
        <b>我的云盘<span>已用空间:9.0M/20.0G</span></b>
        <span>进入云盘 ></span>
      </div>
      <ul class="yunpan">
        <li>
          <img src="img/wangimg/imgs/yunpan-1.gif" alt="" />
          <span>积分倍享</span>
          <p>已用空间9.0M</p>
        </li>
        <li>
          <img src="img/wangimg/imgs/yunpan-2.gif" alt="" />
          <span>积分倍享</span>
          <p>未备份</p>
        </li>
        <li>
          <img src="img/wangimg/imgs/yunpan-3.gif" alt="" />
          <span>积分倍享</span>
          <p>创建群组后轻松共享文件</p>
        </li>
      </ul>

      <!-- 百宝箱 -->
      <div class="yewu">
        <b>百宝箱</b>
      </div>
      <ul class="baibaoxiang">
        <li>
          <img src="img/wangimg/imgs/tese-4.gif" alt="" />
          <span>和包钱包</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/yunpan-3.gif" alt="" />
          <span>积分倍享</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-1.gif" alt="" />
          <span>我的套餐</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-2.gif" alt="" />
          <span>套餐余量</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-3.gif" alt="" />
          <span>账单查询</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-4.gif" alt="" />
          <span>已定业务</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-5.gif" alt="" />
          <span>话费余额</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-6.gif" alt="" />
          <span>订单查询</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-7.gif" alt="" />
          <span>充值缴费</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-8.gif" alt="" />
          <span>宽带报表</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-9.gif" alt="" />
          <span>我的投诉</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-10.gif" alt="" />
          <span>交费历史</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-11.gif" alt="" />
          <span>我的卡卷</span>
        </li>
        <li>
          <img src="img/wangimg/imgs/fuwu-12.gif" alt="" />
          <span>我的订单</span>
        </li>
      </ul>

      <!-- 空 -->
      <div class="kong"></div>
    </div>
    <Bottom />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration-line: none;
  list-style-type: none;
}
.bigbox {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

.lan {
  width: 100%;
  height: 2.5rem;
  background-color: #3663ef;
}
.tou {
  width: 60%;
  height: 0.42rem;
  position: absolute;
  top: 0.7rem;
  left: 0.1rem;
}
.tou a {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tou > a > img {
  width: 0.42rem;
  height: 0.42rem;
}
.tou > a > b {
  font-size: 0.18rem;
  color: #fff;
}

.di {
  width: 60%;
  height: 0.4rem;
  position: absolute;
  top: 1.14rem;
  left: 0.15rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.di > span {
  display: block;
  border: 1px solid white;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.14rem;
}

.si {
  width: 85%;
  height: 0.5rem;
  position: absolute;
  top: 1.55rem;
  left: 0.25rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.si p {
  font-size: 0.18rem;
}
.si span {
  text-align: center;
  font-size: 0.12rem;
  color: #fff;
}

.quan {
  width: 90%;
  height: 0.8rem;
  background-color: #f6f6f6;
  margin: auto;
  position: absolute;
  top: 2.25rem;
  left: 0.18rem;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
}
.zuo {
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.zuo img {
  width: 0.38rem;
  height: 0.38rem;
}
.zuo > span > p {
  font-size: 0.12rem;
}

.tao {
  width: 90%;
  height: 0.8rem;
  background-color: white;
  margin: auto;
  margin-top: 0.6rem;
  border-radius: 5px;
  display: flex;
  justify-content: space-evenly;
}
.tao li {
  width: 0.6rem;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.tao li a{
  width: 0.6rem;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.tao li a span{
  color: #000;
}
.tao li img {
  width: 0.26rem;
  height: 0.26rem;
  margin-bottom: 0.05rem;
}
.tao li span {
  font-size: 0.1rem;
}

.fuwu {
  width: 90%;
  height: 3.3rem;
  background-color: white;
  margin: 0.1rem auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.fuwu li {
  width: 0.84rem;
  height: 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fuwu li img {
  width: 0.2rem;
  height: 0.2rem;
  margin-bottom: 0.05rem;
}
.fuwu li span {
  font-size: 0.12rem;
}

.yewu {
  width: 90%;
  height: 0.36rem;
  margin: 0.05rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
.yewu b {
  font-size: 0.14rem;
}
.yewu b > span {
  font-weight: normal;
  color: blue;
  margin-left: 0.1rem;
}
.yewu span {
  font-size: 0.12rem;
}
.tese {
  width: 90%;
  height: 1.52rem;
  margin: 0.1rem auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background-color: white;
}
.tese li {
  width: 0.84rem;
  height: 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tese li img {
  width: 0.2rem;
  height: 0.2rem;
  margin-bottom: 0.05rem;
}
.tese li span {
  font-size: 0.12rem;
}

.yunpan {
  width: 90%;
  height: 1.25rem;
  margin: 0.1rem auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  background-color: white;
}
.yunpan li {
  width: 0.96rem;
  height: 0.96rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.yunpan li img {
  width: 0.27rem;
  height: 0.22rem;
  margin-bottom: 0.05rem;
}
.yunpan li span {
  font-size: 0.12rem;
}
.yunpan li p {
  width: 0.75rem;
  text-align: center;
  font-size: 0.1rem;
  color: gray;
}

.baibaoxiang {
  width: 90%;
  height: 2.88rem;
  margin: 0.05rem auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  background-color: white;
}
.baibaoxiang li {
  width: 0.86rem;
  height: 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.baibaoxiang li img {
  width: 0.26rem;
  height: 0.26rem;
  margin-bottom: 0.05rem;
}
.baibaoxiang li span {
  font-size: 0.12rem;
}

.kong {
  width: 100%;
  height: 0.8rem;
}
</style>
